<template>
	<view class="personal">
		<ul>
			<li>
				<text>头像：</text>
				<image :src="user_avatar" mode=""></image>
			</li>
			<li>
				<text>昵称：</text>
				<p>{{user_nickName}}</p>
			</li>
			<li>
				<text>性别：</text>
				<p>男</p>
			</li>
			<li>
				<text>书龄：</text>
				<p>2年</p>
			</li>
			<li>
				<text>登录时间：</text>
				<p>{{user_create_time | formatData}}</p>
			</li>
			<li>
				<text>个性签名：</text>
				<p>别假装努力结局不会陪你演戏</p>
			</li>
		</ul>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				user_avatar:'',
				user_create_time:'',
				user_nickName:''
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo')
			console.log(JSON.parse(userInfo));
			let {
				user_avatar,
				user_create_time,
				user_id,
				user_nickName
			} = JSON.parse(userInfo);
			this.user_avatar = user_avatar;
			this.user_create_time = user_create_time;
			this.user_id = user_id;
			this.user_nickName = user_nickName;
		},
		methods:{},
		filters: {
			formatData(data) {
				var date = new Date(data); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m + s;
			},
			readFunc(value) {
				let time = Math.floor(value / 60)
				return time
			}
		}
	}
</script>

<style lang="scss">
	.personal {
		width: 100%;
		height: 1000px;
		background-color: #fceccc;

		ul {
			list-style: none;
			padding: 0;

			li {
				display: flex;
				height: 130rpx;
				justify-content: space-between;
				width: 99%;
				align-items: center;
				margin: 0 auto;
				padding: 0 50rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #fd6e51;

				image {
					width: 78rpx;
					height: 78rpx;
					border-radius: 50%;
				}

				text {
					color: #3b3b3b;
					font-weight: 600;
				}

				p {
					color: #8e8a81;
					font-size: 15px;
				}
			}
		}
	}
</style>